<template>
	<view class="content">
		<view class="nav">
			<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
			<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				<view class="tab-scroll_box">
					<!-- 选项卡类别列表 -->
					<view class="tab-scroll_item" v-for=" (item,index) in categorys" :key="index" :class="{'active':isActive==index}" @click="chenked(index)">
						<image :src="item.src" mode="" class="img"></image>
						<p>{{item.text}}</p>
						
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
		<swiper @change="change"  class="swiper-content" >
			<swiper-item class="swiperitem-content" v-for=" (item,index) in category" :key="index">
				<scroll-view scroll-y  class="sv"  >
					<view class="nav_item" >
						<h1>{{item.title1}}</h1>
						<p>{{item.title}}</p>
						<view class="nav-item-p" v-for="(items,indexs) in item.content" :key="index">
							{{items.contents}}
						</view>
					</view>
				</scroll-view>	
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
export default {
		watch:{
			// swiper与上面选项卡联动
			currentindex(newval){
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
		},
		data() {	
			return {
				isActive: 0,
				index: 0,
				currentindex:0,
				category:[
					{
						id:1,
						title:'权益介绍',
						title1:'优惠券',
						content:[
							{id:'1',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'2',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'3',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'4',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'5',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'6',contents:'达到V2的用户可获得：满200-3元优惠券1张'}
						]
					},
					{
						id:2,
						title:'权益介绍',
						title1:'加油金',
						content:[
							{id:'1',contents:'达到V4的用户可获得：3元加油金'},
							{id:'2',contents:'达到V5的用户可获得：5元加油金'},
							{id:'3',contents:'达到V6的用户可获得：8元加油金'},
							{id:'4',contents:'加油金有效期30天（自到账之日起算）'},
						]
					},
					{
						id:3,
					title:'权益介绍',
					title1:'洗车券5元',
					content:[
						{id:'1',contents:'等级达到V5、V6的的用户可获得:洗车券5元1张。兑换流程:'},
						{id:'2',contents:'1、此优惠券为1张x5元标准洗券(满5.1元可用);'},
						{id:'3',contents:'2、领取成功的优惠券可在"橙牛汽车管家-我的-优惠券"中查看、兑换,如偶遇发放延迟，请咨询橙牛客服;'},
						{id:'4',contents:'3、兑换码激活有效期至2022年12月31日24点,请在有效期内兑换，逾期作废;春节期间门店歇业无法兑换，具体时间另行通知;'},
						{id:'5',contents:'4、兑换成功的卡包有效期为30天,逾期作废。'},
					]
					},
					{
						id:4,
						title:'权益介绍',
						title1:'打蜡券20元',
						content:[
							{id:'1',contents:'等级达到V5、V6的的用户可获得:打蜡券20元1张。兑换流程:'},
							{id:'2',contents:'1、此优惠券为1张20元汽打蜡券(满80元减20元);'},
							{id:'3',contents:'2、领取成功的优惠券可在"橙牛汽车管家-我的-优惠券"中查看、兑换,如偶遇发放延迟，请咨询橙牛客服;'},
							{id:'4',contents:'3、兑换码激活有效期至2022年12月31日24点,请在有效期内兑换，逾期作废;春节期间门店歇业无法兑换，具体时间另行通知;'},
							{id:'5',contents:'4、兑换成功的卡包有效期为30天,逾期作废。'},
						]
					},
					{
						id:5,
						title:'权益介绍',
						title1:'保养券100元',
						content:[
							{id:'1',contents:'等级达到V5、V6的的用户可获得: 100元汽轧保养券1张。'},
							{id:'2',contents:'兑换流程:'},
							{id:'3',contents:'1、此优惠券为1张满300元减100元汽车保养券;'},
							{id:'4',contents:'2、领取成功的优惠券可在"橙牛汽车管家-我的一优惠券"中查看、兑换,如偶遇发放延迟,请咨询橙牛客服;'},
							{id:'5',contents:'3、兑换码激活有效期至2022年12月31日24点请在有效期内兑换,逾期作废;春节期间门店歇业无法兑换，具体时间另行通知;'},
							{id:'6',contents:'4、兑换成功的卡包有效期为30天。'}
						]
					},
					{
						id:6,
						title:'权益介绍',
						title1:'生日礼包',
						content:[
							{id:'1',contents:'1、团油祝您生日快乐,心想事成!'},
							{id:'2',contents:'2、等级达到V4、V5、V6的用户可在生日当月,领取一份神秘好礼,仅限生日期间可领取,逾期失效。'},
							{id:'3',contents:'3、生日礼包一年仅可领取一次，且仅可在生日当日起7日内领取。'},
							{id:'4',contents:'使用说明:'},
							{id:'5',contents:'1、最下方填写生日信息,即可领取生日礼包;'},
							{id:'6',contents:'2、生日信息一经填写不可修改,请谨慎填写。'}
						]
					},
					{
						id:7,
						title:'权益介绍',
						title1:'抽奖',
						content:[
							{id:'1',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'2',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'3',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'4',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'5',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'6',contents:'达到V2的用户可获得：满200-3元优惠券1张'}
						]
					},
					{
						id:8,
						title:'权益介绍',
						title1:'优惠券',
						content:[
							{id:'1',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'2',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'3',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'4',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'5',contents:'达到V2的用户可获得：满200-3元优惠券1张'},
							{id:'6',contents:'达到V2的用户可获得：满200-3元优惠券1张'}
						]
					},
				],
				categorys:[
					{id:'1',src:'../../static/cd.gif',text:'优惠券'},
					{id:'2',src:'../../static/cd1.gif',text:'加油金'},
					{id:'3',src:'../../static/cd2.gif',text:'洗车劵5元'},
					{id:'4',src:'../../static/cd3.gif',text:'打蜡卷20元'},
					{id:'5',src:'../../static/cd4.gif',text:'保养劵100元'},
					{id:'6',src:'../../static/cd5.gif',text:'生日礼包'},
					{id:'7',src:'../../static/cd6.gif',text:'抽奖'},
					{id:'8',src:'../../static/cd7.gif',text:'专属客服'}
				],
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight:"",	
			}
		},
		mounted() {
			var that = this;
			 //获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			uni.getSystemInfo({
			      success: function (res) {
				         that.fullHeight ="height:" + res.windowHeight + "px";
				  }
				});
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
		},
		methods: {
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					  // 拿到 scroll-view 组件宽度
					  this.contentScrollW = data.width
				 }).exec();
				 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					 let dataLen = data.length;
					  for (let i = 0; i < dataLen; i++) {
						  //  scroll-view 子元素组件距离左边栏的距离
						  this.category[i].left = data[i].left;
						 //  scroll-view 子元素组件宽度
						 this.category[i].width = data[i].width
					}
				 }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e){
				const {current} = e.detail;
				this.currentindex = current;
			},	
		}
	}
			
</script>
<style lang="scss">
	page{
		height: 100%;
		display: flex;
		background-color: #e5e5e5;
	}
	.img{display: block;width:80rpx;height: 80rpx;margin: 0 auto;}
	.content{
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		.nav{
			border-top: 1rpx solid #f2f2f2;
			background-color: #fff;	
			
			z-index: 99;
			width: 100%;
			align-items: center;
		
			.tab-scroll{
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				
				.tab-scroll_box{
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;
					.tab-scroll_item{
						color:#8f8878;
						margin-right: 35rpx;
						flex-shrink: 0;
						padding:  50rpx;
						display: flex;
						flex-direction: column;
						font-size: 16px;
					
					}
				}
			}
		}
		.sv{width: 95% !important;  background-color: #FFFFFF;height: 500px;border-radius: 20rpx;margin-top: 20rpx;}
		.swiper-content{		  
			   flex: 1;
			.swiperitem-content{
			  
				
				.nav_item{
					
					padding:20rpx 40rpx 0rpx 40rpx ;
					h1{width: 300rpx;margin: 0rpx auto;font-size: 40rpx;text-align: center;}
					p{margin: 20rpx 0;}
					.nav-item-p{line-height: 50rpx;}
				}
			}
		}	
	}
	.active {
		position: relative;
		color: #f6d9b1 !important;
		font-weight: 600;
	}
	.active::after {
		content: "";
		position: absolute;
		width: 130rpx;
		height: 4rpx;
		background-color: #f00;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
</style>
 